<template>
    <el-row style="margin-top:10px;">
        <el-col :span="3"><div class="grid-content"></div></el-col>
        <el-col :span="18">
            <div class="grid-content" style="min-height:500px;">
                <template>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="事务名称" prop="name" required>
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="事务编号" prop="code">
                            <el-input v-model="ruleForm.code"></el-input>
                        </el-form-item>
                        <el-form-item label="保密口令" prop="command">
                            <el-input v-model="ruleForm.command"></el-input>
                        </el-form-item>
                        <el-form-item label="类型" prop="type" required>
                            <el-select v-model="ruleForm.type" placeholder="请选择类型">
                            <el-option label="事务甲方" value="M0"></el-option>
                            <el-option label="事务乙方" value="S0"></el-option>
                            <el-option label="未区分" value="00"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分组码" prop="group_mk">
                            <el-input v-model="ruleForm.group_mk"></el-input>
                        </el-form-item>
                        <el-form-item label="开始日期">
                            <el-form-item prop="start_use">
                                <el-date-picker type="date" placeholder="选择开始日期" v-model="ruleForm.start_use" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="有效标识" prop="use_mk">
                            <el-input v-model="ruleForm.use_mk"></el-input>
                        </el-form-item>
                        <el-form-item label="开户地址" prop="address">
                            <el-input v-model="ruleForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="ruleForm.remark"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </div>
        </el-col>
        <el-col :span="3"><div class="grid-content"></div></el-col>
    </el-row>
</template>

<script>
    import Main from './main.js'
    export default {
      data() {
        return {
          ruleForm: {
            name: '',
            code: '', 
            command: '', 
            type: '', 
            start_use: this.$c.cndate(),
            use_mk: '',
            address: '',
            remark: ''
          },
          rules: {
            name: [
              { required: true, message: '请输入【事务名称】', trigger: 'blur' }
            ],
            type: [
              { required: true, message: '请输入【事务类型】', trigger: 'blur' }
            ]
          }
        };
      },
      methods: {
        submitForm(formName) {
          var pager = this.$route.name;
          if('view' == pager){
              return this.$message({
                  showClose: true,
                  message: '您在在查看数据，查看数据时不能更新数据！',
                  type: 'warning'
              });
          }
          this.$refs[formName].validate((valid) => {
            if (valid) {
              //alert('submit!');
              var formData = this.$refs[formName].model;
              console.log(formData);
              if('edit' == pager){
                  formData['listid'] = this.$route.params.no;
              }
              this.$c.PigeonsPost('finance/affair/add',
                  formData,
                  (result)=>{
                      this.$message({
                          showClose: true,
                          message: result.msg,
                          type: 'success'
                      });
                      if(200 == result){
                          //this.$refs[formName].resetFields();
                      }
                  },
                  (error, httpMK)=>{
                      this.$message({
                          showClose: true,
                          message: error,
                          type: 'error'
                      });
                  },
                  ()=>{}
              );
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      },
      created () {
        //console.log(this.$route)
        var name = this.$route.name;
        if('edit' == name || 'view' == name){
            Main.loadSinglerList(this, this.$route.params);
        }
      }
    }
</script>